<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <!--
    表单
      1.文本框
         .form-control 表单元素的样式
         表单控件的大小  .input-lg（变大一点）  .input-sm（变小一点）
      2.下拉框
         .form-control  表单元素的样式
         multiple = "multiple"  设置下拉框多选
      3.文本域
         .form-control 表单元素的样式
      4.复选框
         垂直显示 .checkbox
         水平显示 .checkbox-inline
      5.单选框
         垂直显示 .radio
         水平显示 .radio-inline
      6.按钮
         1.使用按钮:  .btn
         附加样式:  btn-primary
                  btn-info
                  btn-success
                  btn-warning
                  btn-danger
                  btn-link
                  btn-default
         2.多标签使用
            其他标签可以通过添加按钮样式设置成按钮效果(a标签，span标签等)
         3.按钮大小
            大按钮 .btn-lg
            正常按钮 .btn-sm
            小按钮 .btn-xs
         4.按钮禁用
            1.通过disabled属性(真正的禁用元素)
            2.通过disabled样式（样式上禁用）
  -->

  <!--原生态-->
  <input type="text" /> <br>
  <select>
    <option>请选则城市</option>
    <option>上海</option>
    <option>北京</option>
  </select> <br>
  <textarea></textarea><br>
  <input type="checkbox" name="hobby"> 唱歌
  <input type="checkbox" name="hobby"> 跳舞
  <input type="radio" name="sex"> 男
  <input type="radio" name="sex"> 女
  <button>按钮</button><input type="button" value="按钮">

  <hr><br>

  <!--bootstrap-->
  <!--1.文本框-->
  <input type="text" class="form-control"/> <br>
  <div class="row"><!--行-->
    <div class="col-lg-3"><!--行中占3格-->
      <!--文本框-->
      <input type="text" class="form-control"/> <br>
      <input type="text" class="form-control input-lg"/> <br><!--变大一点-->
      <input type="text" class="form-control input-sm"/> <br><!--变小一点-->
    </div>
  </div>

  <hr>

  <!--2.下拉框-->
<div class="row">
  <div class="col-lg-3">
    <select class="form-control">
      <option value="">请选择城市</option>
      <option value="">上海</option>
      <option value="">北京</option>
    </select>
    <!--多选-->
    <select class="form-control" multiple="multiple">
      <option value="">请选择城市</option>
      <option value="">上海</option>
      <option value="">北京</option>
    </select>
  </div>
</div>

  <hr>

<!--3.文本域-->
<div class="row">
  <div class="col-lg-3">
    <textarea class="form-control"></textarea>
  </div>
</div>

  <hr>

<!--复选框-->
  <!--复选框垂直显示-->
<div class="row">
  <div class="col-lg-3">
    <div class="checkbox">
      <label><input type="checkbox" name="hobby">唱歌</label>
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="hobby">跳舞</label>
    </div>
  </div>
</div>
<!--复选框水平显示-->
<div class="row">
  <div class="col-lg-3">
    <label class="checkbox-inline">
      <input type="checkbox" name="hobby">唱歌
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" name="hobby">跳舞
    </label>
  </div>
</div>

<!--单选框-->
<!--单选框垂直显示-->
  <div class="row">
    <div class="col-lg-3">
      <div class="radio">
        <label><input type="radio" name="sex">男</label>
      </div>
      <div class="radio">
        <label><input type="radio" name="sex">女</label>
      </div>
    </div>
  </div>
<!--水平显示-->
<div class="row">
  <div class="col-lg-3">
    <div class="radio-inline">
      <input type="radio" name="sex">男
    </div>
    <div class="radio-inline">
      <input type="radio" name="sex">女
    </div>
  </div>
</div>
<!--按钮-->
<button class="btn">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-default">按钮</button>
<button class="btn btn-link">按钮</button>

  <!--通过按钮样式设置其他元素为按钮效果-->
  <a href="#" class="btn btn-link">标签</a>
  <span class="btn btn-warning">span标签</span>
  <div class="btn btn-danger">div标签</div>

  <br>

  <!--设置按钮的大小-->
  <a href="#" class="btn btn-link">标签</a>
  <span class="btn btn-warning btn-lg">span标签</span>
  <div class="btn btn-danger btn-sm">div标签</div>
  <div class="btn btn-danger btn-xs">div标签</div>

  <br>

  <!--按钮禁用-->
  <!--在标签中添加disabled属性-->
  <button class="btn btn-info" onclick="alert('Hello');">按钮</button>
  <button class="btn btn-info" onclick="alert('Hello');" disabled="disabled">按钮</button>
  <!--在元素标签中添加disabled-->
  <button class="btn btn-primary disabled" onclick="alert('Hello');">按钮</button>
</body>
</html>
